<template>
  <div>
    <!-- 有数据 -->
    <div class="list">
      <div class="item" v-for="item in arr" :key="item.id">
        <van-checkbox
          v-model="item.checked"
          shape="square"
          @change="changeOne"
        ></van-checkbox>
        <van-swipe-cell>
          <van-card :title="item.goodsname" :thumb="$pre + item.img">
            <div slot="price">￥{{ item.price | filterPrice }}</div>
            <div slot="num">
              <van-button @click="sub(item.id, item.num)">-</van-button>
              <span class="num-span">{{ item.num }}</span>
              <van-button type="primary" @click="add(item.id)">+</van-button>
            </div>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              @click="del(item.id)"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
      <!-- 无数据 -->
      <van-empty v-if="arr.length == 0" description="暂无数据" />
      <!-- 去结算 -->
      <div class="footer">
        <van-checkbox
          v-model="allChecked"
          shape="square"
          class="checkbox"
          @click="changeAll"
          >全选</van-checkbox
        >
        <div class="allPrice">合计：￥ {{ allPrice | filterPrice }}</div>
        <van-button type="danger" @click="toOrder">结算</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { getShopList, reqAddNum, reqDelShop, reqOrderAdd } from "../../http/http";
export default {
  data() {
    return {
      arr: [],
      allChecked: false,
    };
  },
  activated() {
    this.status = true;
    this.init();
  },
  methods: {
    // 初始化，发送请求购物车数据的方法
    init() {
      getShopList({uid:JSON.parse(localStorage.getItem("userInfo")).uid}).then((res) => {
        let list = res.data.list ? res.data.list : [];
        //判断这条数据中有没有checked属性，如果有，就为当前的值，如果没有就给false
        list.forEach((item) => {
          let obj = this.arr.find((i) => i.id == item.id);
          item.checked = obj ? obj.checked : false;
        });
        this.arr = list;
        //全选的初始值
        this.allChecked = this.arr.every((item) => item.checked);
        //本次请求完成，可以进行下一次请求
        this.status = true;
      });
    },
    //点击+
    add(id) {
      reqAddNum({ id, type: 2 }).then((res) => {
        if (res.data.code == 200) {
          Toast("操作成功");
          this.init();
        }
      });
    },
    /*点击-   有一个bug，连续点击多次，num还是会为负值，请求需要时间，这次请求还没完成，又发送一次请求，
              发送完一次请求，把这个入口关闭，这次请求完成，再把这个入口打开
    */
    sub(id, num) {
      if (num <= 1) {
        Toast("亲，不能再少了！");
        return;
      }
      if (this.status) {
        this.status = false;
        reqAddNum({ id, type: 1 }).then((res) => {
          if (res.data.code == 200) {
            Toast("操作成功");
            this.init();
          }
        });
      }
    },

    onSubmit() {
      this.$router.push("/confirmOrder");
    },
    changeAll() {
      this.arr.forEach((item) => {
        item.checked = this.allChecked;
      });
    },
    toOrder() {
      //存储数据，生成订单中使用
      let json = {
        countmoney:this.allPrice,
        countnumber:this.arr.reduce((val,item)=>{
          return item.checked?val+item.num:val
        },0),
        idstr:this.arr.reduce((val,item)=>{
          return item.checked?val+','+item.id:val
        },"").slice(1)
      }
      localStorage.setItem("order",JSON.stringify(json));
      this.$router.push("/confirmOrder")
    },
    changeOne() {
      this.allChecked = this.arr.every((item) => {
        return item.checked;
      });
    },
    del(id) {
      //删除提示
      Dialog.confirm({
        title: "删除提示",
        message: "你确定要删除吗？",
      }).then(() => {
        reqDelShop({ id }).then((res) => {
          if (res.data.code == 200) {
            Toast.success("删除成功")
            this.init();
          }
        });
      });
    },
  },
  computed: {
    allPrice() {
      return this.arr.reduce((val, item) => {
        return item.checked ? val + item.price * item.num : val;
      }, 0);
    },
  },
};
</script>

<style scoped>
.item {
  position: relative;
}
.van-checkbox {
  position: absolute;
  top: 50%;
  left: 0.2rem;
  transform: translate(0, -50%);
  z-index: 100;
}
.van-swipe-cell {
  padding-left: 0.4rem;
}

.footer {
  height: 0.8rem;
  position: fixed;
  left: 0;
  bottom: 1.01rem;
  background: #fff;
  width: 100vw;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}
.footer .allPrice {
  margin-left: 2.5rem;
  margin-top: 0.25rem;
}

.van-swipe-cell__right .delete-button {
  height: 100%;
}
.van-button {
  height: 0.6rem;
}
.van-button__text {
  font-weight: bold;
  font-size: 0.35rem;
}
.van-button--normal {
  padding: 0 10px;
}
</style>